<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动化扫码请求页</title>
</head>
<style type="text/css">
  #box{background-color: blue;position: absolute;}
  #start{padding: 10px 80px;}
  .cpid{font-size: 2em;margin-top: 1em;margin-left: 1em;}
</style>
<body>
<button id="start" onclick="st()">刷新</button>
<div class="cpid">cpid:{$cpid}</div>
<div id="box"></div>
<script>
    let img_url = '{$img_url}'
    function st(){
        let offset = 0;
        let cpid = {$cpid};
        /*if(img_url === ''){
            offset = 0
        }else{
            offset =1
        }*/
        /*if(cpid>0){
            offset =1
        }else{
            offset = 0
        }*/
        location.href = `{$curl}?offset=${offset}`
    }

  var winWidth = 0;
  var winHeight = 0;
  function findDimensions() //函数：获取尺寸
  {
      let w_old = 520
      let h_old = 700
      let m_left = 127 //夜神模拟器摄像头半宽
//获取窗口宽度
      if (window.innerWidth)
          winWidth = window.innerWidth;
      else if ((document.body) && (document.body.clientWidth))
          winWidth = document.body.clientWidth;
//获取窗口高度
      if (window.innerHeight)
          winHeight = window.innerHeight;
      else if ((document.body) && (document.body.clientHeight))
          winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
      if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
          winHeight = document.documentElement.clientHeight;
          winWidth = document.documentElement.clientWidth;
      }

      let box = document.querySelector('#box')
      box.style.width = w_old + 'px'
      box.style.height = h_old + 'px'
      box.style.left = winWidth / 2 - m_left / 2 + 'px'
      box.style.top = winHeight / 2 - m_left + 'px'
      box.style.backgroundRepeat = "no-repeat"
      box.style.backgroundSize = "contain"

      if(img_url !== ''){
          box.style.backgroundImage = `url(${img_url})`
      }

  }
  findDimensions();
  //调用函数，获取数值
  window.onresize=findDimensions;
</script>
</body>
</html>
